<template>
	<view class="container l-fv">
		<view>
			<ele-state :alarmInfo="alarmInfo" :repairInfo="repairInfo"></ele-state>
			<view class="c-bg-f u-bb o-plr">
				<view class="u-bb o-pb">
					<view class="l-fjb o-ptb l-ft">
						<view class="c-tb c-t7 l-fa o-pr">{{info.regionName}}</view>
						<view class="">
							
							<button @click="attention(is_att?0:1)" class="c-ws" style="padding: 0 30rpx;" type="default" size="mini">{{is_att?'已关注':'关注'}}</button>
						</view>
					</view>
					<view class="l-ft c-t7">
						<view class="c-ws">安装地址：</view>
						<view class="">{{info.location}}</view>
					</view>
					<view class="l-ft c-t7 o-pt">
						<view class="c-ws">详细地址：</view>
						<view class="">{{info.locationDetail}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="">
				<u-tabs :list="list_tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="l-box" style="flex: auto;height:100%">
			<scroll-view  style="flex: auto;height:100%" scroll-y="true" >
				<ele-record v-if="current == 1" :current="current_record"></ele-record>
				<ele-info v-else></ele-info>
			</scroll-view>
			<view v-if="current == 1" class="l-box-pa-l w100">
				<u-tabs :list="list_tabs_record" :is-scroll="false" :current="current_record" @change="changeRecord"></u-tabs>
			</view>
		</view>
		
	</view>
</template>

<script>
	import eleInfo from "@/components/ele/info.vue";
	import eleRecord from "@/components/ele/record.vue";
	import eleState from "@/components/state.vue";
	export default {
		name: '',
		data() {
			return{
				list_tabs: [{
					name: '电梯信息'
				}, {
					name: '电梯记录'
				}],
				current: 0,
				list_tabs_record: [{
					name: '保养记录'
				}, {
					name: '维修记录'
				}],
				
				current_record: 0,
				base: {
					current: 1,
					size: 10
				},
				is_att: 0, //是否关注
			}
		},
		components:{eleInfo, eleRecord, eleState},
		computed:{
			isAttention: vm => vm.$store.getters.eleInfo.isAttention,
			info: vm => vm.$store.getters.eleInfo.eleInfo,
			alarmInfo: vm => {
				let alarmInfo = vm.$store.getters.eleInfo.alarmInfo.alarmInfo;
				let data = alarmInfo.filter(i => i.is_icon = true);
				return data
			},
			repairInfo: vm => vm.$store.getters.eleInfo.alarmInfo.repairInfo
		},
		onLoad() {
			this.is_att = this.isAttention
		},
		methods: {
			change(index) {
				this.current = index;
				if(index == 1) {
					this.$store.dispatch('get_maintainRecord',{eleId:this.info.id,...this.base})
				}
			},
			changeRecord(index) {
				// this.current_record = index;
				let eleId = this.info.id
				this.$set(this, 'current_record', index)
				if(index == 1) {
					this.$store.dispatch('get_repairsRecord',{eleId:eleId,...this.base})
				}else{
					this.$store.dispatch('get_maintainRecord',{eleId:eleId,...this.base})
				}
				this.$store.commit('set_tabs', index)
				// this.$store.commit('set_recordList')
			},
			attention(e) {
				let data = {
					eleId:this.info.id,
					type: e
				}
				this.$store.dispatch('attention', data)
				.then(res => {
					if(res.data.code == 200) {
						this.$Function.Suc(res.data.msg);
						this.$store.dispatch('get_EleList', {loading:'hide'});
						this.is_att = !this.is_att
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
	}
</style>
